<template>
  <div class="bar-page">
    <!--header-->
    <el-card style="margin-bottom: 10px;">
      <div class="header">
        <!--吧头像-->
        <div class="bar-avatar">
          <el-image
            v-if="barInfo.avatar"
            style="width: 120px; height: 120px"
            :src="barAvatarUrl"
            fit="fill">
          </el-image>
        </div>
        <!--吧信息-->
        <div class="right-content">
          <!--吧名-->
          <div style="margin-bottom: 10px;cursor: pointer; font-size: x-large">
            {{ barInfo.name }}
            <!--吧动态-->
            <span style="margin-right: 20px;"><i class="el-icon-user"></i>{{ barInfo.followNum }}</span>
            <span><i class="el-icon-tiezi"></i>{{ barInfo.postNum }}</span>
          </div>
          <!--吧简介-->
          <div>简介: {{ barInfo.introduction }}</div>
        </div>
        <!--关注吧-->
        <div class="header-button">
          <el-button @click="changeFollow">
            <span v-if="isFollowBar">已关注</span>
            <span v-else>关注</span>
          </el-button>
        </div>
      </div>
    </el-card>
    <!--main-->
    <div class="main">
      <!--左页面-->
      <el-card class="left">
        <div v-if="!postList" class="block">还没有帖子,赶紧去发帖吧(～￣▽￣)～</div>
        <post-list :post-list="postList"/>
      </el-card>
      <!--右页面-->
      <el-card class="right">
        <!--用户信息-->
        <div class="home-right-head">
          <!--用户头像-->
          <el-avatar v-if="avatar" :src="avatarUrl" shape="square" :size="64"/>
          <div class="head-right">
            <!--会员-->
            <div class="vip-info">
              <span v-if="vipLevel > 1" class="userInfo-vip2">年度大会员</span>
              <span v-else-if="vipLevel > 0" class="userInfo-vip1">正式会员</span>
              <span v-else class="userInfo-vip0">开通会员</span>
            </div>
            <!--硬币-->
            <div class="userInfo-coin">
              <el-icon class="el-icon-coin"></el-icon>
              <span>{{ coin }}</span>
            </div>
          </div>
        </div>
        <!--用户昵称-->
        <div class="nickname">
          <router-link
            class="user-center-item"
            to="/personal"
            target="_blank"
          >{{ nickname }}
          </router-link>
        </div>
        <el-divider/>
        <!--发帖看帖-->
        <div class="right-button">
          <el-button @click="dialogFormVisible = true" type="primary"><i class="el-icon-edit"/>发帖</el-button>
          <el-button @click="$router.go(0)"><i class="el-icon-refresh"/>刷新</el-button>
        </div>
        <!--吧信息-->
        <div class="right-barInfo">
          <h4>本吧信息</h4>
        </div>
      </el-card>
    </div>
    <!--发帖表单-->
    <el-dialog :visible.sync="dialogFormVisible" width="674px" :show-close="false">
      <!--上传信息-->
      <el-form :model="barInfo">
        <!--标题-->
        <el-form-item>
          <el-input v-model="post.title"></el-input>
        </el-form-item>
        <!--emoji-->
        <div class="emoji">
            <span v-for="emoji in emojiList" :key="emoji" @click="post.content+=emoji" style="cursor: default">
              {{ emoji }}
            </span>
        </div>
        <!--内容-->
        <el-form-item>
          <el-input type="textarea" :rows="5" v-model="post.content"></el-input>
        </el-form-item>
        <!--上传图片-->
        <el-form-item>
          <el-upload
            list-type="picture-card"
            ref="upload"
            accept="image/*"
            multiple
            :limit="7"
            :action="actionUrl"
            :auto-upload="false"
            :data="post"
            :on-success="onSuccess"
            :on-change="onChange"
            :http-request="uploadImg"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="createPost">发 帖</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import PostList from '@/components/PostList'
import { baseUrl } from '@/utils/const'
import { createImgPost, createPost, getBarPost } from '@/api/post'
import { getId } from '@/utils/auth'
import { getBarInfo } from '@/api/bar'
import { changeFollow, isFollowBar } from '@/api/user_bar_follow'

export default {
  components: { PostList },
  data () {
    return {
      barInfo: {},
      postList: {},
      dialogFormVisible: false,
      fileList: [],
      formData: '',
      post: {
        title: '',
        content: '',
        userId: '',
        barId: '',
        date: ''
      },
      isFollowBar: '',
      emojiList: ['☺️', '😆', '😅', '😭', '😋', '🤮', '🤗', '😱', '🤣', '😄', '😍', '🤡', '👿', '🙉', '👨🏻‍🦳', '❤️', '🙏🏻']
    }
  },
  computed: {
    barAvatarUrl () {
      return baseUrl + this.barInfo.avatar
    },
    avatar () {
      return this.$store.getters.avatar
    },
    avatarUrl () {
      return baseUrl + this.avatar
    },
    nickname () {
      return this.$store.getters.nickname
    },
    vipLevel () {
      return this.$store.getters.vipLevel
    },
    coin () {
      return this.$store.getters.coin
    },
    // 图片上传地址
    actionUrl () {
      return baseUrl + 'createImgPost'
    }
  },
  created () {
    this.getBarInfo()
    this.getBarPostList()
    this.judgeIsFollowBar()
  },
  methods: {
    // 获取吧信息
    async getBarInfo () {
      const res = await getBarInfo(this.$route.query.id)
      this.barInfo = res.barInfo
    },
    // 初始化帖子列表
    async getBarPostList () {
      const res = await getBarPost(this.$route.query.id)
      this.postList = res.postList
      // console.log(this.postList)
    },
    // 判断是否关注吧
    async judgeIsFollowBar () {
      const res = await isFollowBar(getId(), this.$route.query.id)
      this.isFollowBar = res.isFollowBar
    },
    // 改变关注状态
    async changeFollow () {
      const res = await changeFollow(this.isFollowBar, getId(), this.$route.query.id)
      if (res.code === 200) {
        this.isFollowBar = !this.isFollowBar
      }
    },
    // 发布帖子
    async createPost () {
      this.post.userId = getId()
      this.post.barId = this.$route.query.id
      this.post.date = new Date()
      let res
      if (this.fileList && this.fileList.length) {
        this.formData = new FormData()
        this.$refs.upload.submit()
        for (const postKey in this.post) {
          this.formData.append(postKey, this.post[postKey])
        }
        res = await createImgPost(this.formData)
      } else {
        res = await createPost(this.post)
      }
      this.dialogFormVisible = false
      if (res.code === 200) {
        this.$message.success({
          duration: 1000,
          message: '发帖成功'
        })
      }
    },
    // 图片上传成功
    onSuccess () {
      this.$message.success({
        duration: 1000,
        message: '发布成功'
      })
    },
    // 切换图片时
    onChange (file, fileList) {
      // this.fileList = fileList
    },
    // 自定义上传图片
    uploadImg (param) {
      this.formData.append('file', param.file)
    }
  }
}
</script>

<style scoped lang="less">
.bar-page {
  width: 900px;
  margin: 0 auto;
  //border: 1px solid @borderBase;

  .el-card {
    background-color: #eff6fc;
  }

  .header {
    display: flex;
    padding: 20px;
    height: 200px;
    align-items: flex-end;
    //width: 100%;
    background: url('../../assets/background/banner.png');
    background-size: cover;

    .bar-avatar {
      cursor: pointer;
    }

    .right-content {
      margin-left: 15px;
      margin-right: 15px;
      width: 400px;

      span {
        font-size: small;
        color: @menuText_gray;
        margin-bottom: 10px;
      }
    }

    .header-button {
      //justify-self: flex-end;
    }
  }

  .main {
    display: flex;
    margin-bottom: 10px;

    .left {
      width: 100%;

      .block {
        font-size: 24px;
        line-height: 478px;
        text-align: center;
      }
    }

    .right {
      margin-left: 10px;
      padding: 20px;
      width: 250px;

      .home-right-head {
        display: flex;
        justify-content: space-evenly;
        padding: 20px;

        .el-avatar {
          margin-right: 10px;
        }

        .head-right {
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;

          .vip-info {
            margin-bottom: 2px;
            margin-top: 2px;
            display: flex;
            justify-content: center;

            .userInfo-vip2 {
              display: inline-block;
              box-sizing: border-box;
              padding: 2px 4px;
              background-color: @nickname;
              color: rgb(255, 255, 255);
              font-size: 12px;
              font-weight: lighter;
              border-radius: 4px;
              cursor: pointer;
            }

            .userInfo-vip1 {
              box-sizing: border-box;
              border: 1px solid @nickname;
              color: @nickname;
              border-radius: 4px;
              cursor: default;
              font-size: 12px;
              font-weight: lighter;
              padding: 1px 4px;
            }

            .userInfo-vip0 {
              box-sizing: border-box;
              color: @menuColor;
              border-radius: 4px;
              cursor: pointer;
              font-size: 12px;
              font-weight: lighter;
              padding: 2px 4px;
            }
          }

          .userInfo-coin {
            text-align: center;
            font-size: 12px;
            padding: 2px;
          }
        }
      }

      .nickname {
        margin: 0 auto;
        width: 196px;
        color: @pink;
        font-weight: 700;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .right-button {
        display: flex;
        justify-content: space-evenly;
      }

      .right-barInfo {
        height: 200px;
      }
    }
  }

  /deep/
  .el-dialog {
    .el-dialog__header {
      padding: 0;
    }

    .el-input__inner {
      border-radius: 0;
    }

    .emoji {
      font-size: 20px;
      text-align: center;
      border-top: 1px solid @borderBase;
      border-left: 1px solid @borderBase;
      border-right: 1px solid @borderBase;
      padding: 10px;

      ::selection {
        background: none;
      }
    }
  }

}
</style>
